import React, {useState} from 'react';
import {Card} from '@alifd/next';
import {Chart, Geom} from 'bizcharts';
import mock from './mock.js';
import {request, useHistory} from 'ice'
import styles from './index.module.scss';

interface ChartItem {
  date?: string;
  value?: number;
}

interface CardConfig {
  title?: string | React.ReactDOM;
  subTitle?: string | React.ReactDOM;
  value?: string;
  chartData?: ChartItem[];
  des?: string;
  rate?: number;
  chartHeight?: number;
}

interface DashboardValue {
  active?: number | React.ReactDOM;
  login?: number | React.ReactDOM;
  register?: number | React.ReactDOM;
  totalUser?: number | React.ReactDOM;
  video?: number | React.ReactDOM;
}

const DEFAULT_DATA: CardConfig = {
  subTitle: '总计用户',
  value: mock.value,
  chartData: mock.saleList,
  des: '周同比:',
  rate: 10.1,
  chartHeight: 100,
};


export interface FusionCardBarChartProps {
  dashboardValue?: DashboardValue;
}


const FusionCardBarChart: React.FunctionComponent<FusionCardBarChartProps> = (props: FusionCardBarChartProps): JSX.Element => {

  const [active, setActive] = useState(0);
  const [login, setlogin] = useState(0);
  const [totalUser, settotalUser] = useState(0);
  const [register, setregister] = useState(0);
  const [video, setvideo] = useState(0);
  const [init, setInit] = useState(false);
  const [version, setVersion] = useState("");

  if (!init) {
    setInit(true);
    getNum();
  }

  async function getNum() {
    try {
      const data = await request({
        url: '/v1/dashboard',
        method: 'get',
      });
      if (data.statusCode == 200) {
        setActive(data.data.active);
        setlogin(data.data.login);
        settotalUser(data.data.totalUser);
        setregister(data.data.register);
        setvideo(data.data.video);
        setVersion(data.data.version);
        return;
      }
    } catch (error) {
      console.error(error);
    }
  }


  const title = "";


  return (
    <Card free>
      {
        title ? (
          <>
            <Card.Header title={title}/>
            <Card.Divider/>
          </>
        ) : null
      }
      <Card.Content>
        {/* subTitle */}
        <div className={styles.subTitle}>总计用户</div>
        <div className={styles.value}>{totalUser}</div>
        {/* <div className={styles.des}>{des}<span>{rate}↑</span></div>
        <Chart
          width={10}
          height={chartHeight}
          data={chartData}
          scale={{
            date: {
              range: [0, 1],
            },
          }}
          forceFit
          padding={['auto', '16']}
        >
          <Geom type="interval" position="date*value" color="#29A5FF"/>
        </Chart> */}
      </Card.Content>
      <Card.Content>
        <div className={styles.subTitle}>今日激活</div>
        <div className={styles.value}>{active}</div>
      </Card.Content>
      <Card.Content>
        <div className={styles.subTitle}>今日观看视频</div>
        <div className={styles.value}>{video}</div>
      </Card.Content>
      <Card.Content>
        <div className={styles.subTitle}>今日登录</div>
        <div className={styles.value}>{login}</div>
      </Card.Content>
      <Card.Content>
        <div className={styles.subTitle}>今日注册</div>
        <div className={styles.value}>{register}</div>
      </Card.Content>
      <Card.Content>
        <div className={styles.subTitle}>当前后台版本</div>
        <div className={styles.value}>{version}</div>
      </Card.Content>
    </Card>

  );
};

export default FusionCardBarChart;
